﻿@page "/maps/open-street-map"


@using Syncfusion.Blazor.Maps

@inherits SampleBaseComponent;

<SampleDescription>
   <p> This sample visualizes the location of United Nations Headquarters in the OpenStreetMap with marker</p> 
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to render the OpenStreetMap. The OpenStreetmaps is rendered by setting <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer.html#Syncfusion_Blazor_Maps_MapsLayer_LayerType'>layerType</a></code> as <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ShapeLayerType.html'>OSM</a></code> in <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer.html'>Mapslayer</a></code> property The location of United Nations Headquarters is denoted using marker.</p>
   <p>More information about OpenStreetmaps can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/maps/providers/openstreetmap'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfMaps>
        <MapsTitleSettings Text="Headquarters of the United Nations"/>
        <MapsCenterPosition Latitude="40.7209" Longitude="-73.9680"/>
        <MapsZoomSettings Enable="false" ZoomFactor="10"/>
        <MapsLayers>
            <MapsLayer LayerType="ShapeLayerType.OSM" TValue="string">
                <MapsMarkerSettings>
                    <MapsMarker Visible="true" DataSource="@MarkerDatas" TValue="MarkerData">
                        <ChildContent>
                            <MapsMarkerTooltipSettings Visible="true" ValuePath="Name"/>
                        </ChildContent>
                        <MarkerTemplate>
                            @{
                                <div style="pointer-events: none;">
                                    <img class="markerTemplate" src="images/maps/ballon.png" />                                        
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                </MapsMarkerSettings>
            </MapsLayer>
        </MapsLayers>
    </SfMaps>
    <div class="urllink">
        <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>
    </div>
    <br />
    <div class="urllink">
        Source:
        <a href="https://en.wikipedia.org/wiki/Headquarters_of_the_United_Nations" target="_blank">en.wikipedia.org</a>
    </div>
</div>
<style>
    .markerTemplate {
        height: 30px;
        width: 20px;
        display: block;
        margin: auto;
        font-size: 14px;
        pointer-events:none;
    }
</style>
@code {
    public class MarkerData {
        public string Name { get; set; }
        public double Latitude { get; set; }
        public double Longitude { get; set; }
    }
    public List<MarkerData> MarkerDatas = new List<MarkerData> {
        new MarkerData { Name="Manhattan, New York, USA",  Latitude=40.7488758, Longitude=-73.9730091 }
    };
}